<template>
  <div class="mobile-card-list" :class="{'with-batch-action': selectedRows.length > 0}">
    <el-card 
      v-for="(item, index) in priceList" 
      :key="index" 
      class="mobile-card" 
      :class="{'selected-card': isItemSelected(item)}"
      :body-style="{ padding: '12px' }">
      <div class="card-header">
        <div class="price-date">{{ item.priceDate }}</div>
        <el-tag :type="item.priceSource === 'shanghai' ? 'success' : 'warning'" size="mini">
          {{ item.priceSource === 'shanghai' ? '上海铝价' : '长江铝价' }}
        </el-tag>
      </div>
      <div class="card-body">
        <div class="price-amount">
          <span class="price-label">铝价金额:</span>
          <span class="price-value">{{ item.averagePrice }} 元</span>
        </div>
        <div class="price-tags">
          <el-tag size="mini" :type="item.manualUpdate ? 'danger' : 'info'" class="manual-tag">
            {{ item.manualUpdate ? '手动更新' : '自动爬取' }}
          </el-tag>
          <span class="update-time">{{ item.updatedAt ? item.updatedAt.substring(0, 10) : '' }}</span>
        </div>
      </div>
      <div class="card-footer">
        <div class="checkbox-wrapper">
          <el-checkbox 
            v-model="item.selected"
            @change="(val) => handleSingleCheck(val, item)">
          </el-checkbox>
        </div>
        <div class="button-group">
          <el-button size="mini" type="primary" icon="el-icon-edit" circle @click.stop="handleEdit(item)"></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" circle @click.stop="handleDelete(item)"></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MobileCardList',
  props: {
    priceList: {
      type: Array,
      required: true
    },
    selectedRows: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isItemSelected(item) {
      return this.selectedRows.some(row => row.id === item.id);
    },
    handleSingleCheck(checked, row) {
      this.$emit('check-change', { checked, row });
    },
    handleEdit(row) {
      this.$emit('edit', row);
    },
    handleDelete(row) {
      this.$emit('delete', row);
    }
  }
}
</script>
